<template>
	<gui-page ref="guipage" :refresh="true" @reload="reload" :isSwitchPage="true">
		<view slot="gBody">
		<view class="userInfo-box flex-ac-jb">
			<view class="info flex-dc flex1">
				<text class="f44" @tap="$u.to('userInfo')">{{userInfoMine.nickname}}</text>
				<view class="saveBtn">楼主</view>
				<view class="num">
					<text class="it"  @tap="$u.to('orderIncome')">本日订单 <text class="bold f30">{{userInfoMine.todayOrderNum}}</text>单</text>
					<text class="it"  @tap="$u.to('orderIncome')">本月订单 <text class="bold f30">{{userInfoMine.totalOrderNum}}</text>单</text>
				</view>	
			</view>
			<image class="headImg"  @tap="$u.to('userInfo')" :src="userInfoMine.avatar||'../../static/logo.png'" @error="$u.imgError(userInfoMine,'avatar')" mode="aspectFill"></image>
		</view>
		<view class="module">
			<view class="box_tool">
				<text class="title">常用功能</text>
				<view class="tool">
					<view class="item" @tap="$u.to('orderIncome')">
						<image src="../../static/mine/tool1.png" mode="widthFix"></image>
						<text>我的订单</text>
					</view>
					<!-- <view class="item">
						<image src="../../static/mine/tool4.png" mode="widthFix"></image>
						<text>官方客服</text>
					</view> -->
					<view class="item" @tap="$u.to('aboutUs?type=1')">
						<image src="../../static/mine/tool5.png" mode="widthFix"></image>
						<text>关于我们</text>
					</view>
					<view class="item" @tap="loginOut"  v-if="this.userInfoMine.id">
						<image src="../../static/mine/loginOut.png" mode="widthFix"></image>
						<text>退出登录</text>
					</view>
				</view>
				<view class="bottom_icons">
					<image src="../../static/mine/qishou.png" mode="widthFix"></image>
					<!-- <image v-if="userInfoMine.role==1" src="../../static/mine/qishou.png" mode="widthFix"></image> -->
					<!-- <image v-if="userInfoMine.role==2" src="../../static/mine/fenjian.png" mode="widthFix"></image>
					<image v-if="userInfoMine.role==3" src="../../static/mine/qingxi.png" mode="widthFix"></image> -->
				</view>
			</view>
		</view>
	</view>
	</gui-page>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				userInfoMine:{},  //个人信息
			}
		},
		/* computed: {
			...mapState(['userInfo'])
		}, */
		onLoad() {
			
		},
		onShow() {
			this.getUser()
		},
		onPullDownRefresh() {  //页面下拉
			console.log('refresh');
			this.reload()
			uni.stopPullDownRefresh();
		},
		methods: {
			...mapMutations(['login','logout']),
			loginOut() {
				// 退出登录
				this.$u.showModal('温馨提示',`确认要退出吗？`,(res)=>{
					console.log(res);
					if (res) {
						this.logout();
					} 
				})
			},
			getUser() {
				this.$http.get('/api/worker/info').then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						this.userInfoMine=res.data.data
						this.login(res.data.data)
					} else {
						this.$u.msg(res.data.msg)
					}
				})
			},
			reload: function() {
				this.getUser()
				this.$refs.guipage.endReload();
			},
		}
	}
</script>

<style lang="less">

.userInfo-box{
	padding: 80rpx 50rpx 42rpx 40rpx;
	.info{
		.saveBtn{
			width: 128rpx;
			height: 40rpx;
			background: #2B2B2B;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			font-size: 26rpx;
			margin: 10rpx 0 30rpx 0;
		}
		.num{
			.it{
				margin-right: 30rpx;
				.bold{
					margin-left: 10rpx;
				}
			}
		}
	}
	.headImg{
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
	}
}
.module{
	position: relative;
	padding: 0 32rpx;
	margin-top: 50rpx;
	.box_tool{
		box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0,0,0,.16);
		background: #fff;
		border-radius: 10rpx;
		padding: 50rpx 32rpx;
		margin: 32rpx 0 50rpx 0;
		.title{
			font-size: 32rpx;
			font-weight: 700;
		}
		.tool{
			display: flex;
			flex-wrap: wrap;
			padding: 0 10rpx;
			.item{
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 32rpx;
				image{width: 80rpx;}
			}
		}
		.bottom_icons{
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			margin-top: 120rpx;
			image{
				width: 350rpx;
			}
		}
	}
}
</style>
